<template>
	<view>
		<view class="textareaView">
			<textarea v-model="reason" maxlength="300" placeholder="请填写您要反馈的内容"></textarea>
		</view>
		<view class="flex-row-flex-end">
			<view class="count">
				{{reason.length}}/300
			</view>
		</view>
		<image @click="upload()" class="upload"
			:src="images || require('../../static/my/upload.png')" />
		<!-- 	<input maxlength="11" v-model="mobile" type="text" placeholder="输入联系方式"> -->
			<view @click='bottomButtonClick()' class="fixed-bottom footer" >
		
				
					<view   class="bottomButton flex-column-center">
						提交意见
					</view>
		
			</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		feedbackAdd
	} from '@/api/index.js'
	import {
		chooseImage,
		chooseImage1
	} from "@/utils";
	export default {
		components: {},
		computed: {

		},
		computed: {
			...mapState([
				'baseColor'
			]),
		
		},
		data() {
			return {
				images:'',
				reason:'',
				mobile:'',

			}
		},
		onShow() {

		},
		onLoad(e) {

		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},

		methods: {
			bottomButtonClick(){
				if(!this.reason.length){
					this.showToast('请填写您要反馈的内容')
					return
				}
				// if(!this.mobile.length){
				// 	this.showToast('输入联系方式')
				// 	return
				// }
				uni.showLoading({
					mask:true
				})
				var that=this
				var url=feedbackAdd
				var data={
					content:this.reason,
					images:this.images,
				}
				url(data)
					.then(res => {
						that.showToast(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					})
					.catch(err => {
				
					})
			},
			upload() {
				chooseImage((img) => {
					this.images = img
			
				});
			},
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
	}
.textareaView{
	// padding: 16rpx;
	margin: 30rpx;
	margin-bottom: 0;
	height: 272rpx;
	// background: #F5F6F7;
	border-radius: 6rpx 6rpx 6rpx 6rpx;
	opacity: 1;
	textarea{
		width: 100%;
		height: 100%;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D3D3D;
	}
}
.count{
	margin-right: 30rpx;
	margin-top: -60rpx;
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: #999999;
}
.inputView{
	padding-left: 20rpx;
	margin: 20rpx 0;
	margin-bottom: 0;
	height: 90rpx;
	background: #F5F6F7;
	border-radius: 6rpx 6rpx 6rpx 6rpx;
	opacity: 1;
	input{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D3D3D;
	}
}
.upload{
	margin-top: 20rpx;
	width:240rpx;
	height:240rpx;
	border-radius: 10rpx;
	margin-left: 30rpx;
}
input{
	margin-top: 64rpx;
	margin-left: 30rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #3D3D3D;
}
.bottomButton{
		margin: 40rpx;
		margin-bottom: 0rpx;
		height: 100rpx;
		// background: $base-color;
		border-radius: 36rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>